<template>
  <a-layout class="globalLayout">
    <drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
      <sider-menu ref="sideMenu" :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect" />
    </drawer>
    <sider-menu ref="sideMenu" :theme="theme" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
    <a-layout class="globalLayout">
      <global-header :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse" />
      <div class="tag-nav-wrapper" v-if="multipage">
        <tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag" />
      </div>

      <a-layout-content class="globalLayoutContent">
        <slot></slot>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import GlobalHeader from './GlobalHeader';
import Drawer from '../components/tool/Drawer';
import SiderMenu from '../components/menu/SiderMenu';
import TagsNav from './tags-nav';
import routers from '@/router/routers';
import { getNewTagList, routeEqual } from '@/libs/appUtil';
import { mapMutations } from 'vuex';

let menuData = [];

export default {
  name: 'GlobalLayout',
  components: { SiderMenu, Drawer, GlobalHeader, TagsNav },
  data() {
    return {
      collapsed: false,
      menuData: menuData,
      showSetting: false
    };
  },
  watch: {
    $route(newRoute) {
      const { name, query, params, meta } = newRoute;
      this.addTag({
        route: { name, query, params, meta },
        type: 'push'
      });
      // this.setBreadCrumb(newRoute);
      this.setTagNavList(getNewTagList(this.$store.state.app.tagNavList, newRoute));
      // UNDO
      // this.$refs.sideMenu.updateOpenName(newRoute.name);
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.setting.isMobile;
    },
    theme() {
      return this.$store.state.setting.theme;
    },
    layout() {
      return this.$store.state.setting.layout;
    },
    linkList() {
      return this.$store.state.setting.footerLinks;
    },
    copyright() {
      return this.$store.state.setting.copyright;
    },
    tagNavList() {
      return this.$store.state.app.tagNavList;
    },
    multipage() {
      return this.$store.state.setting.multipage;
    }
  },
  methods: {
    ...mapMutations(['setBreadCrumb', 'setTagNavList', 'addTag', 'setLocal', 'setHomeRoute', 'closeTag']),

    toggleCollapse() {
      this.collapsed = !this.collapsed;
    },
    onDrawerChange(show) {
      this.collapsed = show;
    },
    onMenuSelect() {
      this.toggleCollapse();
    },
    handleClick(item) {
      this.turnToPage(item);
    },
    turnToPage(route) {
      let { name, params, query } = {};
      if (typeof route === 'string') name = route;
      else {
        name = route.name;
        params = route.params;
        query = route.query;
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1]);
        return;
      }
      this.$router.push({
        name,
        params,
        query
      });
    },

    handleCloseTag(res, type, route) {
      if (type !== 'others') {
        if (type === 'all') {
          this.turnToPage(this.$store.state.setting.homeName);
        } else {
          if (routeEqual(this.$route, route)) {
            this.closeTag(route);
          }
        }
      }
      this.setTagNavList(res);
    }
  },
  beforeCreate() {
    let menues = this.$router.options.routes.filter(item => item.component.name === 'mainView');
    let finalMenues = [];
    menues.forEach(item => {
      if (item.meta.hideInMenu) {
        finalMenues = finalMenues.concat(item.children);
      } else {
        finalMenues = finalMenues.concat(item);
      }
    });
    menuData = finalMenues;
    // menuData = this.$router.options.routes.find(item => item.path === '/').children;
  },
  mounted() {
    this.setTagNavList();
    this.setHomeRoute(routers);
  }
};
</script>

<style lang="less" scoped>
.setting {
  background-color: #1890ff;
  color: #fff;
  border-radius: 5px 0 0 5px;
  line-height: 40px;
  font-size: 22px;
  width: 40px;
  height: 40px;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
}

.globalLayout {
  height: 100%;
  overflow: hidden;
}

.globalLayoutContent {
  overflow: auto;
}
.tag-nav-wrapper {
  padding: 0;
  height: 40px;
  background: #f0f0f0;
}
</style>
